{% extends "CmsBundle::base.html.twig" %}

{% block pluginStyles %}

{% endblock %}

{% block pageContent %}
    <!-- PAGE CONTENT BEGINS -->
    <div class="table-responsive">
        <table id="table_posts" class="table table-striped table-bordered table-hover dataTable" style="margin-bottom: 0px;">
            <thead>
            <tr>
                <th class="center">
                    <label><input type="checkbox" class="ace" /><span class="lbl"></span></label>
                </th>
                <th>游戏名称</th>
                <th role="tid" class="sorting">游戏分类</th>
                <th>游戏介绍</th>
                <th role="publish" class="sorting">是否发布</th>
                <th role="logtime" class="sorting_desc">创建时间</th>
                <th></th>
            </tr>
            </thead>

            <tbody>
            {% for item in h5game %}
                <tr>
                    <td class="center">
                        <label>
                            <input type="checkbox" class="ace" name="check_id" value="{{ item.id }}" />
                            <span class="lbl"></span>
                        </label>
                    </td>
                    <td>{{ item.name | title |slice(0, 20) }}</td>
                    <td>{{ item.term.name }}</td>
                    <td>{{ item.intro | striptags | slice(0, 30) | raw }}</td>
                    <td>{% if item.publish %} 是 {% else %} 否 {% endif %}</td>
                    <td>{{ item.logtime | date('Y-m-d H:i:s') }}</td>
                    <td>
                        <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                            <a href="{{ path("yearnfar_cms_post_viewport", {"pid":item.id }) }}" target="_blank">
                                <button class="btn btn-xs btn-success">
                                    <i class="ace-icon fa fa-eye bigger-120"></i>
                                </button>
                            </a>
                            <a href="{{ path("yearnfar_cms_h5game_edit", {"pid":item.id, "page":page, "sort":sort}) }}">
                                <button class="btn btn-xs btn-info">
                                    <i class="ace-icon fa fa-edit bigger-120"></i>
                                </button>
                            </a>
                            <a href="{{ path("yearnfar_cms_h5game_delete", {"pid":item.id, "page":page, "sort":sort}) }}">
                                <button class="btn btn-xs btn-danger">
                                    <i class="ace-icon fa fa-trash bigger-120"></i>
                                </button>
                            </a>
                        </div>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <div style="overflow:hidden; background-color: #eff3f8; padding:15px 5px 10px 5px;">
            <div class="col-sm-6">
                <div class="dataTables_info" id="sample-table-2_info">
                    <span>选中项：</span>
                    <select id="mutil_oper" name="oper">
                        <option value="">操作</option>
                        <option value="delete">删除</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="dataTables_paginate paging_bootstrap">
                    <ul class="pagination">
                        <li>
                            <span style="margin-right: 5px;">总共{{ records }}条记录</span>
                        </li>
                        <!-- 上一页-->
                        <li class="prev{% if page<=1 %} disabled{% endif %}">
                            <a id="page_prev" href="javascript:void(0);">
                                <i class="ace-icon fa fa-angle-double-left"></i>
                            </a>
                        </li>
                        <!-- 第几页 / 总页数-->
                        <li>
                            <span style="margin: 0 5px;">{{ page }} / {{ total }}</span>
                        </li>
                        <!-- 下一页-->
                        <li class="next{% if page>=total %} disabled{% endif %}">
                            <a id="page_next" href="javascript:void(0);">
                                <i class="ace-icon fa fa-angle-double-right"></i>
                            </a>
                        </li>
                        <li>
                            <input type="text" name="page_go" style="width: 50px;margin: 0 5px;" value="{{ page }}">
                            <a id="page_go" href="javascript:void(0);" class="btn btn-sm" style="float:right;"> 跳转 </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div><!-- /.table-responsive -->
    <!-- PAGE CONTENT ENDS -->
{% endblock %}

{% block pluginScripts %}

{% endblock %}

{% block inlineScripts %}
    <script type="text/javascript">
        var postThs = $("#table_posts th[class*=sort]");
        var sortType = "{{ sort }}";

        if (sortType!='') {
            var sort = sortType.split('_');
            console.log(sort, sortType);

            for (var i= 0, pth; i<postThs.length, pth=postThs[i++];) {
                if (sort[0]==$(pth).attr("role")) {
                    $(pth).removeClass().addClass("sorting_" + sort[1]);
                } else {
                    $(pth).removeClass().addClass("sorting");
                }
            }
        }

        postThs.on('click' , function() {
            var type = 'asc';
            if (this.className=='sorting') {
                $(this).removeClass().addClass("sorting_asc");
            } else if (this.className=='sorting_asc') {
                $(this).removeClass().addClass("sorting_desc");
                type = 'desc';
            } else if (this.className=='sorting_desc') {
                $(this).removeClass().addClass("sorting_asc");
            }

            for (var i= 0, pth; i<postThs.length, pth=postThs[i++];) {
                if ($(pth).index()!=$(this).index()) {
                    $(pth).removeClass().addClass("sorting");
                }
            }

            window.location.href = "{{ path("yearnfar_cms_post_index") }}?sort=" + $(this).attr("role")+"_" + type;
        });

        //
        $('table th input:checkbox').on('click' , function(){
            var p = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox').each(function(){
                this.checked = p.checked;
                $(this).closest('tr').toggleClass('selected');
            });

        });

        var total = {{ total }};
        var page  = {{ page }};
        var path  = "{{ path("yearnfar_cms_post_index", {"sort": sort}) }}";

        $("#mutil_oper").on('change',function() {

            var chk_box = $("input[name='check_id']");
            var chk_ids = '';

            for (var i=0; i<chk_box.length; i++) {
                if (chk_box[i].checked) {
                    if (chk_ids!='') {
                        chk_ids += ',' + chk_box[i].value;
                    } else {
                        chk_ids = chk_box[i].value;
                    }
                }
            }

            if (this.value!='' && chk_ids=='') {
                alert('请选择需要操作的文章！');
                return;
            }

            switch (this.value) {
                case 'delete' :
                    window.location.href = "{{ path('yearnfar_cms_post_delete') }}?pid=" + chk_ids;
                    break;
                default :
                    alert("参数错误！");
                    break;
            }
            return ;
        });

        $("input[name=page_go]").on('keydown', function() {
            if (event.keyCode==13) {
                var page_go = this.value;//取值
                if (page_go>=1 && page_go<=total) {
                    window.location.href = path+"&page=" + (page_go);
                }
            }
            return ;
        });

        $(".pagination a").on('click', function() {
            switch (this.id) {
                case 'page_prev':
                    if (page > 1) {
                        window.location.href = path+"&page=" + (page-1);
                    }
                    break;
                case 'page_next':
                    if (page < total) {
                        window.location.href = path+"&page=" + (page+1);
                    }
                    break;
                case 'page_go':
                    var page_go = $(".pagination input[name=page_go]").val();//取值
                    if (page_go>=1 && page_go<=total) {
                        window.location.href = path+"&page=" + (page_go);
                    }
                    break;
            }
            return ;
        });
    </script>
{% endblock %}